<template>
    <el-container>
        <el-card shadow="hover" class="card">
            <div>
                <div class="radio-inputs">
                    <label class="radio" @click="selectTab = 'tab1'">
                        <input type="radio" name="radio" :checked="selectTab === 'tab1'">
                        <span class="name">整体数据</span>
                    </label>
                    <label class="radio" @click="selectTab = 'tab2'">
                        <input type="radio" name="radio" :checked="selectTab === 'tab2'">
                        <span class="name">先验欺诈数据</span>
                    </label>
                    <label class="radio" @click="selectTab = 'tab3'">
                        <input type="radio" name="radio" :checked="selectTab === 'tab3'">
                        <span class="name">后验欺诈数据</span>
                    </label>
                </div>

                <div v-show="selectTab === 'tab1'" id="my-tab1">
                    <vxe-table round border stripe align="center" :loading="tab1.loading" show-overflow
                        :loading-config="{ icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...' }" height="590"
                        :row-config="{ isCurrent: true, isHover: true }"
                        :seq-config="{ startIndex: (tab1.tablePage.currentPage - 1) * tab1.tablePage.pageSize }"
                        :data="tab1.tableData" :headerCellStyle="{ backgroundColor: '#209978', color: '#fff' }">

                        <vxe-column type="seq" title="序号" width="60"></vxe-column>

                        <vxe-column v-for="column in result.columns" :key="column" :field="column" :title="column"
                            :fixed="column === 'RES' || column === '识别结果' ? 'right' : undefined"
                            :filters="column == 'RES' || column == '识别结果' ? [{ label: '非欺诈', value: 0 }, { label: '欺诈', value: 1 }] : undefined"
                            width="160">
                            <template v-if="column === 'RES' || column === '识别结果'" #default="{ row }">
                                <el-tag v-if="row[column] === 0" type="success">非欺诈</el-tag>
                                <el-tag v-else-if="row[column] === 1" type="danger">欺诈</el-tag>
                            </template>
                        </vxe-column>

                    </vxe-table>

                    <vxe-pager border background icon-prev-page="vxe-icon-arrow-left"
                        icon-jump-prev="vxe-icon-arrow-double-left" icon-jump-next="vxe-icon-arrow-double-right"
                        icon-next-page="vxe-icon-arrow-right" icon-jump-more="vxe-icon-ellipsis-h"
                        :loading="tab1.loading" :current-page="tab1.tablePage.currentPage"
                        :page-size="tab1.tablePage.pageSize" :total="tab1.tablePage.totalResult"
                        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                        @page-change="handlePageChange">
                    </vxe-pager>
                </div>

                <div v-show="selectTab === 'tab2'" id="my-tab2">
                    <vxe-table round border align="center" :loading="tab2.loading" show-overflow
                        :loading-config="{ icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...' }" height="590"
                        :row-config="{ isHover: true }"
                        :seq-config="{ startIndex: (tab2.tablePage.currentPage - 1) * tab2.tablePage.pageSize }"
                        :data="tab2.tableData" :headerCellStyle="{ backgroundColor: '#209978', color: '#fff' }">

                        <vxe-column type="seq" title="序号" width="60"></vxe-column>

                        <vxe-column v-for="column in result.columns" :key="column" :field="column" :title="column"
                            :fixed="column == 'RES' ? 'right' : undefined" width="160">

                            <template v-if="column === 'RES' || column === '识别结果'" #default="{ row }">
                                <el-tag v-if="row[column] === 0" type="success">非欺诈</el-tag>
                                <el-tag v-else-if="row[column] === 1" type="danger">欺诈</el-tag>
                            </template>
                        </vxe-column>

                    </vxe-table>

                    <vxe-pager border background icon-prev-page="vxe-icon-arrow-left"
                        icon-jump-prev="vxe-icon-arrow-double-left" icon-jump-next="vxe-icon-arrow-double-right"
                        icon-next-page="vxe-icon-arrow-right" icon-jump-more="vxe-icon-ellipsis-h"
                        :loading="tab2.loading" :current-page="tab2.tablePage.currentPage"
                        :page-size="tab2.tablePage.pageSize" :total="tab2.tablePage.totalResult"
                        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                        @page-change="handlePageChange">
                    </vxe-pager>
                </div>

                <div v-show="selectTab === 'tab3'" id="my-tab3">
                    <vxe-table round border align="center" :loading="tab2.loading" show-overflow
                        :loading-config="{ icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...' }" height="590"
                        :row-config="{ isHover: true }"
                        :seq-config="{ startIndex: (tab3.tablePage.currentPage - 1) * tab3.tablePage.pageSize }"
                        :data="tab3.tableData" :headerCellStyle="{ backgroundColor: '#209978', color: '#fff' }">

                        <vxe-column type="seq" title="序号" width="60"></vxe-column>

                        <vxe-column v-for="column in result.columns" :key="column" :field="column" :title="column"
                            :fixed="column == '识别结果' ? 'right' : undefined" width="160">

                            <template v-if="column === 'RES' || column === '识别结果'" #default="{ row }">
                                <el-tag v-if="row[column] === 0" type="success">非欺诈</el-tag>
                                <el-tag v-else-if="row[column] === 1" type="danger">欺诈</el-tag>
                            </template>
                        </vxe-column>

                    </vxe-table>

                    <vxe-pager border background icon-prev-page="vxe-icon-arrow-left"
                        icon-jump-prev="vxe-icon-arrow-double-left" icon-jump-next="vxe-icon-arrow-double-right"
                        icon-next-page="vxe-icon-arrow-right" icon-jump-more="vxe-icon-ellipsis-h"
                        :loading="tab3.loading" :current-page="tab3.tablePage.currentPage"
                        :page-size="tab3.tablePage.pageSize" :total="tab3.tablePage.totalResult"
                        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                        @page-change="handlePageChange">
                    </vxe-pager>
                </div>
            </div>
        </el-card>


    </el-container>
</template>

<script>
export default {
    data() {
        return {
            selectTab: 'tab1',
            tab1: {
                loading: false,
                tableData: [],
                tablePage: {
                    currentPage: 1,
                    pageSize: 10,
                    totalResult: 0
                }
            },
            tab2: {
                loading: false,
                tableData: [],
                tablePage: {
                    currentPage: 1,
                    pageSize: 10,
                    totalResult: 0
                }
            },
            tab3: {
                loading: false,
                tableData: [],
                tablePage: {
                    currentPage: 1,
                    pageSize: 10,
                    totalResult: 0
                }
            }
        }
    },
    methods: {
        // 获取表格数据
        findList(tabType, { currentPage, pageSize }) {
            if (this.result && this.result.data) {
                let data = this.result.data;
                if (tabType === 'tab2') {
                    data = data.filter(item => item.RES === 1);
                }
                if (tabType === 'tab3') {
                    data = data.filter(item => item.识别结果 === 1);
                }

                return data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
            } else {
                return [];
            }
        },
        // 换页
        handlePageChange({ currentPage, pageSize }) {
            const currentTab = this.selectTab === 'tab1' ? this.tab1 : this.selectTab === 'tab2' ? this.tab2 : this.tab3;
            currentTab.tablePage.currentPage = currentPage;
            currentTab.tablePage.pageSize = pageSize;
            currentTab.loading = true;
            setTimeout(() => {
                currentTab.tableData = this.findList(this.selectTab, { currentPage: currentTab.tablePage.currentPage, pageSize: currentTab.tablePage.pageSize });
                currentTab.loading = false;
            }, 1000);
        },

        // 从indexeddb上加载result数据
        loadData() {
            this.tab1.loading = true;
            this.tab2.loading = true;
            this.tab3.loading = true;
            setTimeout(() => {
                this.tab1.tableData = this.findList('tab1', { currentPage: this.tab1.tablePage.currentPage, pageSize: this.tab1.tablePage.pageSize });
                this.tab1.tablePage.totalResult = this.result.data.length;
                this.tab1.loading = false;

                this.tab2.tableData = this.findList('tab2', { currentPage: this.tab2.tablePage.currentPage, pageSize: this.tab2.tablePage.pageSize });
                this.tab2.tablePage.totalResult = this.result.data.filter(item => item.RES === 1).length;
                this.tab2.loading = false;

                this.tab3.tableData = this.findList('tab3', { currentPage: this.tab3.tablePage.currentPage, pageSize: this.tab3.tablePage.pageSize });
                this.tab3.tablePage.totalResult = this.result.data.filter(item => item.识别结果 === 1).length;
                this.tab3.loading = false;
            }, 1000);
        },
    },
    computed: {
        result() {
            return this.$store.state.processedData.result;
        },
    },
    mounted() {
        console.log(this.result);
        if (this.result && this.result.data) {
            this.loadData();
        } else {
            // this.$notify({
            //     title: '警告',
            //     message: '请先导入文件',
            //     type: 'warning',
            //     position: 'bottom-right',
            //     duration: 3000
            // });
        }
    },
    watch: {
        result: {
            handler(newVal, oldVal) {
                if (newVal && newVal.data) {
                    this.loadData();
                }
            },
            deep: true,
            immediate: true
        }
    },
}
</script>

<style lang="less" scoped>
@import '../../style/button/button_radio.css';
@import '../../style/radio/radio.css';

.el-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    .card {
        height: 87vh;
    }
}
</style>

<!-- 覆盖组件样式 -->
<style>
#my-tab1 .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:hover,
#my-tab2 .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:hover,
#my-tab3 .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active:hover {
    background-color: #209978;
}

#my-tab1 .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active,
#my-tab2 .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active,
#my-tab3 .vxe-pager.is--background .vxe-pager--num-btn:not(.is--disabled).is--active {
    background-color: #209978;
}

#my-tab1 .vxe-pager .vxe-pager--num-btn:not(.is--disabled):focus,
#my-tab2 .vxe-pager .vxe-pager--num-btn:not(.is--disabled):focus,
#my-tab3 .vxe-pager .vxe-pager--num-btn:not(.is--disabled):focus {
    box-shadow: 0 0 0.25em 0 #209978;
}

#my-tab1 .vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover,
#my-tab2 .vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover,
#my-tab3 .vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover {
    color: #209978;
}


#my-tab1 .vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,
#my-tab2 .vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,
#my-tab3 .vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus {
    box-shadow: 0 0 0.25em 0 #209978;
}

#my-tab1 .vxe-pager .vxe-pager--num-btn:not(.is--disabled):active,
#my-tab2 .vxe-pager .vxe-pager--num-btn:not(.is--disabled):active,
#my-tab3 .vxe-pager .vxe-pager--num-btn:not(.is--disabled):active {
    color: #209978;
}

#my-tab1 .vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,
#my-tab2 .vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus,
#my-tab3 .vxe-pager .vxe-pager--next-btn:not(.is--disabled):focus {
    color: #209978;
}

#my-tab1 .vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover,
#my-tab2 .vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover,
#my-tab3 .vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover {
    color: #209978;
}
</style>
